<template>
	<view class="more-list">
		<view class="block">
			<view class="header">
				<span>筛选</span>
				<view class="select-type">
					<view class="select-type-item" :class="dataObj.type === item.value ? 'selected' : ''" v-for="item in dataObj.catalogs" :key="item.value" @click="onCatalogsTap(item.value)">{{item.title}}</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in dataObj.list" :key="item.id" @click="onPageTap(item.id)">
					<!-- <view class="new" v-if="dataObj.catalogIndex === 1">最新</view> -->
					<image class="cover" :src="item.image_url"></image>
					<view class="title ellipsis-2">{{item.name}}</view>
					<view class="state play" v-if="dataObj.type === 'course'">推荐课程</view>
					<view class="state intro" v-if="dataObj.type === 'train'">推荐培训</view>
					<view class="time" v-if="dataObj.type === 'course'">{{item.class_count}}学时</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {
					type: '', // course: 课程, train: 培训
					// 目录(试看)
					catalogs: [{
						value: 'course',
						title: '课程'
					}, {
						value: 'train',
						title: '培训'
					}],
					list: []
				}
			}
		},
		onLoad(event) {
			const type = event['type'];
			this.dataObj.type = type;
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			onCatalogsTap (value) {
				this.dataObj['type'] = value;
				this.getData();
			},
			// 页面跳转
			onPageTap(id) {
				const pageUrl = {
					course: '/pages/detail/online?id=',
					train: '/pages/detail/train?id='
				};
				const type = this.dataObj['type'];
				uni.navigateTo({
					url: pageUrl[type] + id
				});
			},
			// 获取数据
			getData() {
				const urlObj = {
					course: this.$Api['course']['getreconclass'], // 获取全部课程
					train: this.$Api['train']['getpicktrain'] // 获取全部培训
				};
				const type = this.dataObj['type'];
				const reqUrl = urlObj[type];
				this.$Requset({
					url: reqUrl,
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['list'] = data['list'];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.more-list{
		padding-top: 20rpx;
		.block{
			background-color: #fff;
			border-radius: 22rpx;
			margin-bottom: 18rpx;
			padding: 32rpx 36rpx;
			.header{
				line-height: 48rpx;
				font-size: 32rpx;
				color: #1A1A1A;
				margin-bottom: 32rpx;
				.more{
					float: right;
					position: relative;
					line-height: 36rpx;
					font-size: 24rpx;
					color: #7F7F7F;
					padding-right: 32rpx;
				}
				.more::after{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					width: 36rpx;
					height: 32rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 26rpx 26rpx;
					background-image: url(../../static/images/common/arrow-right.png);
				}
			}
			.swiper-train{
				height: 370rpx;
				&-item{
					position: relative;
					width: 525rpx;
					font-size: 0;
					border-radius: 14rpx;
					.train-image{
						width: 525rpx;
						height: 217rpx;
						background-color: #EAEFF1;
						border-top-left-radius: 14rpx;
						border-top-right-radius: 14rpx;
					}
					.train-tips{
						position: absolute;
						top: 195rpx;
						left: 22rpx;
						width: 163rpx;
						height: 44rpx;
						line-height: 44rpx;
						font-size: 20rpx;
						text-align: center;
						color: #fff;
						background-color: #14213D;
						border-radius: 8rpx;
					}
					.train-title{
						line-height: 40rpx;
						font-size: 28rpx;
						padding: 36rpx 20rpx;
						border: 1rpx solid #EAEFF1;
						border-bottom-left-radius: 14rpx;
						border-bottom-right-radius: 14rpx;
					}
				}
			}
			.select-type{
				float: right;
				height: 48rpx;
				font-size: 0;
				&-item{
					display: inline-block;
					width: 88rpx;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					background-color: #F7F7F7;
					border-radius: 24rpx;
					text-align: center;
					margin-right: 13rpx;
					&:nth-last-child(1) {
						margin-right: 0;
					}
				}
				.selected{
					color: $color-common;
					background-color: rgba($color: #FE6B00, $alpha: 0.1);
				}
			}
			.list{
				font-size: 0;
				.item{
					position: relative;
					display: inline-block;
					width: 326rpx;
					margin-bottom: 24rpx;
					&:nth-child(2n){
						float: right;
					}
					.new{
						position: absolute;
						z-index: 99;
						top: 0;
						right: 0;
						width: 62rpx;
						height: 34rpx;
						line-height: 34rpx;
						font-size: 20rpx;
						color: #fff;
						text-align: center;
						background-color: #f21b3f;
						border-top-right-radius: 14rpx;
						border-bottom-left-radius: 14rpx;
					}
					.cover{
						width: 100%;
						height: 182rpx;
						border-radius: 14rpx;
						background-color: #eee;
						margin-bottom: 14rpx;
					}
					.title{
						height: 64rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #1A1A1A;
						margin-bottom: 2rpx;
					}
					.state{
						position: relative;
						display: inline-block;
						width: 60%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;
						padding-left: 40rpx;
						&::before{
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 40rpx;
							height: 40rpx;
							background-position: center;
							background-repeat: no-repeat;
							background-size: 26rpx 26rpx;
						}
					}
					.intro{
						color: #FE6B00;
						&::before{
							background-image: url(../../static/images/home/recommend.png);
						}
					}
					.play{
						color: #7F7F7F;
						&::before{
							background-image: url(../../static/images/home/play.png);
						}
					}
					.free{
						color: #1BB682;
						&::before{
							background-image: url(../../static/images/home/free.png);
						}
					}
					.time{
						display: inline-block;
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;
						color: #7F7F7F;
						text-align: right;
					}
				}
			}
		}
	}
</style>
